<template>
  <div>

    <div>
      <van-divider
        :style="{ color: 'blue', borderColor: '#BCBCBC', padding: '10px', margin: '0', backgroundColor: '#FFFFFF', fontWeight: 'bolder'}"
      >
        parentValue设置在data（第1种），不会实时变化。 只有失去焦点、回车时调用@change方法才会有变化。
      </van-divider>
      <input v-model="childrenValue" @change="handleChangVal">
    </div>


    <div>
      <van-divider
        :style="{ color: 'red', borderColor: '#BCBCBC', padding: '10px', margin: '0', backgroundColor: '#FFFFFF', fontWeight: 'bolder'}"
      >
        parentValue设置在computed 属性里（第2种）
      </van-divider>
      <input v-model="computedValue">
    </div>




  </div>



</template>

<script>
  export default {
    name: 'comInput',
    props: {
      parentValue: String,
    },
    data(){
      return {
        // 由父组件prop传递过来的值，不能直接被修改，
        // 需要基于parentValue设置在data或computed 属性里面，
        // 即： 需要有个数据缓冲下，这样就能满足父组件、子组件不纠缠在一起，保证公共子组件的独立性
        // data里面可以使用this
        /*
        * 第一种：放在data里面： 不会实时变化。 只有失去焦点、回车时调用@change="" 才会有变化。
        * */
        childrenValue:  this.parentValue,
      }
    },

    /*
    *
    * 第一种：放在computed 属性里面， 但是修改需要set()这两种方法
    *
    * */
    computed: {
      // 会出现没有
      computedValue: {
        get(){
          return this.parentValue
        },
        set(val){
          console.log('在computed里面', val)
          // 父组件prop传递过来的值，不能直接被修改
          this.$emit('getChangeValue', val)
        },
      }
    },

    methods: {
      handleChangVal(){
        console.log('在data里面',)
        // 好处： 满足父组件、子组件不纠缠在一起，保证公共子组件的独立性
        // 将子组件的值，传递过去
        this.$emit('getChangeValue', this.childrenValue)
      }
    },
  }
</script>

<style scoped>

</style>
